<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>手动滚动图片</title>  
<style type="text/css">  
	ul,li{margin:0;padding:0}  
    img{border:0px;}  
      
    #container{padding:40px;}  
      
    #showArea img{width:700px;}  
      
    a{text-decoration:none;border:0px;}  
    #scrollDiv{border:#ccc 1px solid;}  
    #scrollDiv li{background:#A83;}  
      
</style>  
<script src="js/jquery-1.8.3.js" type="text/javascript"></script>  
<script src="js/imgfocus.js" type="text/javascript"></script>  
<script type="text/javascript"> 
    $(document).ready(function(){  
        $.imgfocus({  
            objId:"scrollDiv",  
            showTitle: true,  
            height:210,  
            width:280,  
            speed:1000  
        });  
      
    });  
</script>  
</head>  
      
<body>  
<div id="container">  
	<div id="scrollDiv">  
		<ul>  
            <li><a href="#"><img src="images/1.jpg" alt="images/1.jpg" width="280"/></a></li>  
            <li><a href="#"><img src="images/2.jpg" alt="images/2.jpg" width="280"/></a></li>  
            <li><a href="#"><img src="images/3.jpg" alt="images/3.jpg" width="280"/></a></li>  
            <li><a href="#"><img src="images/4.jpg" alt="images/4.jpg" width="280"/></a></li>  
            <li><a href="#"><img src="images/5.jpg" alt="images/5.jpg" width="280"/></a></li>  
            <li><a href="#"><img src="images/6.jpg" alt="images/6.jpg" width="280"/></a></li>  
		</ul>  
	</div>  
</div>  
</body>  
</html>  
